<script lang="jsx" setup>
// 使用JSX书写递归DOM 扩展性能更好  VUE3新特性 对代码的理解也更友好   
import { Base64 } from "js-base64";
import CryptoJS from "crypto-js";
import DocCenterService from "/@/api/docCenter";

import Files from "/@/utils/checkFile";
import { ref, onMounted, watch } from "vue";
import {
    DownloadDepartmentFile,
  
  } from "/@/api/projectManage/projectList";
let props = defineProps(["data", "height"]);
let treeData = ref([]);
let noTreeData = ref([]);
watch(props, async () => {
  let res = await DocCenterService.getFileList({ path: props.data[0].DirPath });
  if (res.length > 0) {
    noTreeData.value = res;
  } else {
    treeData.value = props.data[0].DirAttVOList;
  }
});

let app = () => {
  return (
    <>
      {noTreeData.value.length == 0 && (
        <div>
          {treeData.value.length > 0 && (
            <el-scrollbar height={props.height}>
              <deepTree data={treeData.value} />
            </el-scrollbar>
          )}
          {treeData.value.length == 0 && (
            <div
              style={`
        height: ${props.height}px;
        display: flex;
        justify-content: center;
        align-items: center;color:#999`}
             
            >
              暂无数据
            </div>
          )}
        </div>
      )}
      {noTreeData.value.length > 0 && (
        <div>
          <el-table
            height="300px"
            header-cell-style={{
              background: "#fafbfc",
              color: "#333333",
            }}
            size="small"
            data={noTreeData.value}
          >
            <el-table-column label="序号" width='80' type="index" align="left" />
            <el-table-column
              show-overflow-tooltip
              label="文档名称"
              prop="file_name"
              align="left"
              v-slots={{
                default: (data) => {
                  return (
                    <span
                      onClick={() => gotoD(data.row)}
                      class="box_item_table_jsx_hober"
                    >
                      {data.row.file_name}
                    </span>
                  );
                },
              }}
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              width="100"
              label="日期"
              prop="create_time"
              align="left"
            />
          </el-table>
        </div>
      )}
    </>
  );
};
let fileInfoData = ref([]);

let findChildren = (data) => {
  let childrenData;
  data.forEach((item) => {
    if (item.DirAttVOList.length > 0) {
      childrenData = findChildren(item.DirAttVOList);
    } else {
      childrenData = item;
    }
  });
  return childrenData;
};
let changeItem = async (obj) => {
  let str = JSON.parse(obj)
  if (str && str.DirAttVOList.length == 0) {
    let res = await DocCenterService.getFileList({ path: str.DirPath });
    fileInfoData.value = res;
  } else {
    let data = str && findChildren(str.DirAttVOList);
    if (data) {
      let res = await DocCenterService.getFileList({ path: data.DirPath });
      fileInfoData.value = res;
    }
  }
};

let gotoD = async (row) => {
  let orgrinUrl = `${row.file_directory}\\${row.file_name}`.replace(/\\/g, "/");

  let orgrinUrls = `http://10.6.100.80:10002/Department/DownloadDepartmentFile?remote_url=${orgrinUrl}`;

  var previewUrl =
    orgrinUrls +
    `&fullfilename=${CryptoJS.MD5(
      row.file_name.split(".")[0]
    ).toString()}.${row.file_name.slice(row.file_name.lastIndexOf(".") + 1)}`;

  window.open(
    "http://10.6.100.80:8012/onlinePreview?url=" +
      encodeURIComponent(Base64.encode(previewUrl))
  );
};

let deepTree = ({ data }) => {
  return (
    <el-collapse onChange={(str) => changeItem(str)} accordion>
      {data.map((item, index) => {
        return (
          <el-collapse-item
            name={JSON.stringify(item)}
            v-slots={{
              title: (data) => (
                <div class="item_coll_title">
                  <img
                    style="width:15px;height:15px"
                    src="http://172.26.166.11:18080/file-icon/folder_icon.png"
                  />
                  &nbsp;&nbsp;
                  {item.DirName}
                </div>
              ),
            }}
          >
            <div class="box_item_coll">
              {item.DirAttVOList.length > 0 && (
                <deepTree data={item.DirAttVOList}></deepTree>
              )}
              {item.DirAttVOList.length == 0 && (
                <div class="box_item_table_jsx">
                  <el-table
                   style='{width:100%}'
                    max-height="300px"
                    header-cell-style={{
                      background: "#fafbfc",
                      color: "#333333",
                    }}
                    size="small"
                    data={fileInfoData.value}
                  >
                    <el-table-column width="22" label="序号" type="index" align="left" />
                    <el-table-column
                   
                      show-overflow-tooltip
                      label="文档名称"
                      prop="file_name"
                      align="left"
                      v-slots={{
                        default: (data) => {
                          return (
                            <span
                              onClick={() => gotoD(data.row)}
                              class="box_item_table_jsx_hober"
                            >
                              {data.row.file_name}
                            </span>
                          );
                        },
                      }}
                    ></el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      width="90"
                      label="日期"
                      prop="create_time"
                      align="left"
                    />
                    <el-table-column
                      
                      width="50"
                      
                     
                      align="left"
                      v-slots={{
                        default: (data) => {
                          return (
                            <div
                            class='bluess'
                              onClick={() => downLoadFile(data.row)}
                            >
                            下载
                            
                            </div>
                          );
                        },
                      }}
                    >
                    </el-table-column>
                  </el-table>
                </div>
              )}
            </div>
          </el-collapse-item>
        );
      })}
    </el-collapse>
  );
};


let downLoadFile = async (row) => {
 
    let res = await DownloadDepartmentFile({remote_url:`${row.file_directory}\\${row.file_name}`});

    let filename = res.headers; //下载后文件名
    let filename2 = ""; //下载后文件名
    filename = filename["content-disposition"];
    filename = window.decodeURI(filename);
    filename2 = filename.split(";")[1].split("filename*=UTF-8''")[1];
    filename = filename.split(";")[1].split("filename=")[1];
    const link = document.createElement("a"); // 创建a标签
    const blo = new Blob([res.data], { type: res.data.type }); // 设置下载格式
    link.style.display = "none";
    const url = window.URL.createObjectURL(blo);
    link.href = url;
    if (filename == undefined) {
      filename = filename2;
    }
    link.download = filename;

    // link.setAttribute('download', "fileName")
    document.body.appendChild(link);
    link.click(); // 触发下载
    window.URL.revokeObjectURL(url); // 释放掉blob对象
    document.body.removeChild(link);
  };
</script>
<template>
  <app />
</template>
<style lang="scss" scoped>
</style>
